<template>
  <div class="question">
    <div v-if="questionType=='0'||questionType=='1'||questionType=='11'" >
      <div class="q-title" v-html="question.title"/>
      <el-form-item label="分值:">
        <el-input-number size="small" v-model="question.score" @change="changeQuestionScore(questionType,question)" :min="0.0" required/>
      </el-form-item>
      <div class="q-content">
          <span :key="index" v-for="(option,index) in question.options" class="q-item-contain">
            <span class="q-option-seqCode">{{option.seqCode+'、'}}</span>
            <span v-html="option.content" class="q-option-content"></span>
            <br/>
          </span>
      </div>
      <div>
        <el-form-item label="答案:">
            <span :key="index" v-for="(option,index) in question.options" class="q-item-contain">
              <span class="q-option-seqCode" v-if="option.answerFlag==true">{{option.seqCode+' '}}</span>
            </span>
        </el-form-item>
        <el-form-item label="难度:">
          <el-rate v-model="question.level" :max="3" class="question-level-rate"></el-rate>
        </el-form-item>
        <el-form-item label="解析:">
          <div class="q-title" v-html="question.explain"/>
        </el-form-item>
      </div>
    </div>
    <div v-else-if="questionType>='2'&&questionType<='6'" >
      <div class="q-title" v-html="question.title"/>
      <el-form-item label="总分值:">
        <el-input-number size="small" v-model="question.score" :min="0.0"  required disabled/>
      </el-form-item>
      <div>
        <el-form-item label="答案:">
            <span :key="index" v-for="(answer,index) in question.answers" class="q-item-contain">
              <span class="q-option-seqCode">{{(index+1)+'、'}}</span>
              <span v-html="answer.answer" class="q-option-content"></span>
              <el-form-item label="小题分值:">
                <el-input-number size="small" v-model="answer.score"  @change="changeQuestionScore(questionType,question)" :min="0.0"  required/>
              </el-form-item>
            </span>
        </el-form-item>
        <el-form-item label="难度:">
          <el-rate v-model="question.level" :max="3" class="question-level-rate"></el-rate>
        </el-form-item>
        <el-form-item label="解析:">
          <div class="q-title" v-html="question.explain"/>
        </el-form-item>
      </div>
    </div>
    <div v-else-if="questionType=='7'" >
      <div class="q-content">
          <span :key="index" v-for="(option,index) in question.options" class="q-item-contain">
            <span class="q-option-seqCode">{{option.seqCode+'、'}}</span>
            <span v-html="option.content" class="q-option-content"></span>
            <br/>
          </span>
      </div>
      <el-form-item label="总分值:">
        <el-input-number size="small" v-model="question.score" :min="0.0"  required disabled/>
      </el-form-item>
      <div :key="index"  v-for="(choice,index) in question.choices">
        <el-form-item :label="'小题'+(index+1)+':'" size="large">
          <div class="question-sub-title" v-html="choice.title"/>
        </el-form-item>
        <el-form-item label="小题分值:">
          <el-input-number size="small" v-model="choice.score" @change="changeQuestionScore(questionType,question)" :min="0.0"  required/>
        </el-form-item>
        <el-form-item label="答案:">
          <span class="q-option-seqCode">{{choice.answer}}</span>
        </el-form-item>
        <el-form-item label="解析:">
          <div class="q-title" v-html="choice.explain"/>
        </el-form-item>
        <el-divider/>
      </div>
      <div>
        <el-form-item label="难度:">
          <el-rate v-model="question.level" :max="3" class="question-level-rate"></el-rate>
        </el-form-item>
      </div>
    </div>
    <div v-else-if="questionType=='8'||questionType=='9'" >
      <div class="q-title" v-html="question.title"/>
      <el-form-item label="总分值:">
        <el-input-number size="small" v-model="question.score" :min="0.0"  required disabled/>
      </el-form-item>
      <div class="q-content" :key="index"  v-for="(subQuestion,index) in question.questions" >
            <el-form-item :label="'小题'+(index+1)+':'" size="large">
              <div class="question-sub-title" v-html="subQuestion.title"/>
            </el-form-item>
            <el-form-item label="小题分值:">
              <el-input-number size="small" v-model="subQuestion.score" @change="changeQuestionScore(questionType,question)" :min="0.0"  required/>
            </el-form-item>
            <span  class="q-item-contain" :key="option.seqCode"  v-for="option in subQuestion.options" >
              <span class="q-option-seqCode">{{option.seqCode+'、'}}</span>
              <span class="q-option-content" v-html="option.content"></span>
              <br/>
            </span>
            <el-form-item label="答案:">
                <span :key="index" v-for="(option,index) in subQuestion.options" class="q-item-contain">
                  <span class="q-option-seqCode" v-if="option.answerFlag==true">{{option.seqCode+' '}}</span>
                </span>
            </el-form-item>
            <el-form-item label="难度:">
              <el-rate v-model="subQuestion.level" :max="3" class="question-level-rate"></el-rate>
            </el-form-item>
            <el-form-item label="解析:">
              <div class="q-title" v-html="subQuestion.explain"/>
            </el-form-item>

          <el-divider/>
      </div>
    </div>
    <div v-else-if="questionType=='10'" >
      <div class="q-title" v-html="question.title"/>
      <div>
        <el-form-item label="答案" >
              <el-radio-group v-model="question.answerFlag">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:">
          <el-rate v-model="question.level" :max="3" class="question-level-rate"></el-rate>
        </el-form-item>
        <el-form-item label="解析:">
          <div class="q-title" v-html="question.explain"/>
        </el-form-item>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'QuestionInfo',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    questionType: {
      type: String,
      default: 0
    }
  },
  methods: {
    changeQuestionScore(questionType,question){
      let score=0;
      let subScores = [];
      if(questionType=='0'||questionType=='1'||questionType=='11'||questionType=='10'){
        if(question.score!==undefined){
          subScores.push(question.score)
        }else{
          subScores.push(0)
        }
      }else {
        if(questionType>='2'&&questionType<='6'){
          question.answers.forEach(answer=>{
            if(answer.score!==undefined){
              score = score+answer.score
              subScores.push(answer.score)
            }else{
              subScores.push(0)
            }
          });
        }
        if(questionType=='7'){
          question.choices.forEach(choice=>{
            if(choice.score!==undefined){
              score = score+choice.score
              subScores.push(choice.score)
            }else{
              subScores.push(0)
            }
          });
        }
        if(questionType=='8'||questionType=='9'){
          question.questions.forEach(subQuestion=>{
            console.log(subQuestion.score)
            if(subQuestion.score!==undefined){
              score = score+subQuestion.score
              subScores.push(subQuestion.score)
            }else{
              subScores.push(0)
            }
          });
        }
        question.score = score;
    }
      question.subScores = JSON.stringify(subScores);
      console.log(JSON.stringify(question.subScores));
      this.$emit("changePaperScore");
    }
  }
}
</script>
